<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>数据选购</title>
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/data_supermarket.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css">
	</head>
	<body>
		<div class="cloose">
			<div class="cloose_nr">
				<div class="closse_nr_left">
					<div class="cloose_prediction">
						<div class="account_title">
							<p></p>
							<span>预报产品</span>
						</div>
						<div class="cloose_prediction_content">
							<ul>
								<li>
									<span>选择城市范围：</span>
									<div class="cloose_prediction_content_list">
										<a class="active" href="javascript:;">全国</a>
										<a id="add_city"  href="javascript:;">自选省份</a>
									</div>
								</li>
								<li>
									<span>选择服务时长：</span>
									<div class="cloose_prediction_content_list">
										<a href="javascript:;">1个月</a>
										<a href="javascript:;">3个月</a>
										<a href="javascript:;">6个月</a>
										<a href="javascript:;">1年</a>
										<a href="javascript:;">2年</a>
										<a href="javascript:;">3年</a>
									</div>
								</li>
								<li>
									<span>逐小时城市预报（带当前数据）：</span>
									<div class="cloose_prediction_content_list">
										<a href="javascript:;">24小时逐小时预报</a>
										<a href="javascript:;">48小时逐小时预报</a>
										<a href="javascript:;">72小时逐小时预报</a>
									</div>
								</li>
								<li>
									<span>逐日城市预报：</span>
									<div class="cloose_prediction_content_list">
										<a href="javascript:;">3天逐日预报</a>
										<a href="javascript:;">7天逐日预报</a>
										<a href="javascript:;">15天逐日预报</a>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="cloose_expert">
						<div class="account_title">
							<p></p>
							<span>专家天气图（全国）</span>
						</div>
						<div class="cloose_expert_content">
							<ul>
								<li class="active">
									<span>专家天气（温度）</span>
									<p>体感温度、相当位置、700hpa气温、850hpa气温、露点温度、最高温度、最低温度、气温</p>
									<img class="expert_content_xz" src="images/expert_content_xz.png">
								</li>
								<li>
									<span>专家天气（风）</span>
									<p>10m风、300hpa、风、700hpa风、850hpa风、925hpa风、混合层CAPE/0-6km风切变、重要龙卷参数/0-1km风切变</p>
									<img class="expert_content_xz" src="images/expert_content_xz.png">
								</li>
								<li>
									<span>专家天气（温度）</span>
									<p>体感温度、相当位置、700hpa气温、850hpa气温、露点温度、最高温度、最低温度、气温</p>
									<img class="expert_content_xz" src="images/expert_content_xz.png">
								</li>
								<li>
									<span>专家天气（温度）</span>
									<p>10m风、300hpa、风、700hpa风、850hpa风、925hpa风、混合层CAPE/0-6km风切变、重要龙卷参数/0-1km风切变10m风、300hpa、风、700hpa风、850hpa风、925hpa风、混合层CAPE/0-6km风切变、重要龙卷参数/0-1km风切变</p>
									<img class="expert_content_xz" src="images/expert_content_xz.png">
								</li>
								<li>
									<span>专家天气（温度）</span>
									<p>体感温度、相当位置、700hpa气温、850hpa气温、露点温度、最高温度、最低温度、气温10m风、300hpa、风、700hpa风、850hpa风、925hpa风、混合层CAPE/0-6km风切变、重要龙卷参数/0-1km风切变10m风、300hpa、风、700hpa风、850hpa风、925hpa风、混合层CAPE/0-6km风切变、重要龙卷参数/0-1km风切变</p>
									<img class="expert_content_xz" src="images/expert_content_xz.png">
								</li>
								<li>
									<span>专家天气（温度）</span>
									<p>体感温度、相当位置、700hpa气温、850hpa气温、露点温度、最高温度、最低温度、气温</p>
									<img class="expert_content_xz" src="images/expert_content_xz.png">
								</li>
							</ul>
						</div>
					</div>

				</div>
				<div class="closse_nr_right">
					<div class="account_title">
						<p></p>
						<span>订单信息</span>
					</div>
					<div class="cloose_right_content">
						<ul>
							<li>
								<p><i>◆</i><span>24H逐小时天气预报</span></p><a href="javascript:;">¥200</a>
							</li>
							<li>
								<p><i>◆</i><span>7D逐日天气预报</span></p><a href="javascript:;">¥200</a>
							</li>
							<li>
								<p><i>◆</i><span>中国约/季气候预测</span></p><a href="javascript:;">¥200</a>
							</li>
							<li>
								<p><i>◆</i><span>海洋海浪预报</span></p><a href="javascript:;">¥200</a>
							</li>
							<li>
								<p><i>◆</i><span>台风路径/强度预报</span></p><a href="javascript:;">¥200</a>
							</li>
							<li>
								<p><i>◆</i><span>中国雷达拼图</span></p><a href="javascript:;">¥200</a>
							</li>
						</ul>
					</div>
					<div class="tongji">
						<p><span>合计：</span><i>¥1525.00</i></p>
						<button class="cloose_an" hsrc="order.html">提交订单</button>
					</div>
				</div>
			</div>
		</div>
	</body>

	<div class="add_city_content" id="add_city_content">
		<div class="login_title">
			<div class="nav_title active">
				<img src="images/nav_title_icon.png">
				<span>选择省市</span>
			</div>
		</div>

		<div class="add_city_content_nr">
			<div class="add_city_top add_city_bottom">
				<ul>
					<li>
						<span>已选择省份</span>
						<div class="add_city_top_list">
						</div>
					</li>
				</ul>
			</div>

			<div class="add_city_list">
				<span>省份列表</span>
				<div class="add_city_list_content">
					<a href="javascript:;">北京</a>
					<a href="javascript:;">天津</a>
					<a href="javascript:;">河北</a>
					<a href="javascript:;">山西</a>
					<a href="javascript:;">内蒙古</a>
					<a href="javascript:;">辽宁</a>
					<a href="javascript:;">吉林</a>
					<a href="javascript:;">黑龙江</a>
					<a href="javascript:;">上海市</a>
					<a href="javascript:;">江苏</a>
					<a href="javascript:;">浙江</a>
					<a href="javascript:;">安徽</a>
					<a href="javascript:;">福建</a>
					<a href="javascript:;">江西</a>
					<a href="javascript:;">山东</a>
					<a href="javascript:;">河南</a>
					<a href="javascript:;">湖南</a>
					<a href="javascript:;">湖北</a>
					<a href="javascript:;">广东</a>
					<a href="javascript:;">广西</a>
					<a href="javascript:;">海南</a>
					<a href="javascript:;">重庆</a>
					<a href="javascript:;">四川</a>
					<a href="javascript:;">贵州</a>
					<a href="javascript:;">云南</a>
					<a href="javascript:;">西藏</a>
					<a href="javascript:;">陕西</a>
					<a href="javascript:;">甘肃</a>
					<a href="javascript:;">青海</a>
					<a href="javascript:;">宁夏</a>
					<a href="javascript:;">新疆</a>
					<a href="javascript:;">香港</a>
					<a href="javascript:;">澳门</a>
					<a href="javascript:;">台湾</a>
				</div>
				</ul>
			</div>

		</div>

		<div class="add_city_find" style="margin-top:20px; padding:0 30px;">
			<button class="find_close" onclick="find_close()">取消</button>
			<button>确认</button>
		</div>
	</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/layui/layui.js"></script>
<script type="text/javascript" src="js/swiper4.min.js"></script>
<script type="text/javascript">
	$(function() {
		
		// 调用父页面事件
		$('.cloose_an').click(function(){
			var Hsrc = $(this).attr('hsrc');
			window.parent.data_hrcf(Hsrc);
		});

		$('.cloose_expert_content ul li').click(function(){
			if($(this).hasClass('active')){
				$(this).removeClass('active');
			}else{
				$(this).addClass('active');
			}
		});

		$('.cloose_prediction_content_list a').click(function(){
			if($(this).hasClass('active')){
				$(this).removeClass('active');
			}else{
				$(this).addClass('active').siblings().removeClass('active');
			}
		});

		$('.add_city_list_content a').click(function(){
			var cityName = $(this).text();
			var index = $(this).index();
			if($(this).hasClass('active')){
				$(this).removeClass('active');
				$('#'+cityName).remove();
			}else{
				$(this).addClass('active');
				$('.add_city_top_list').append('<a href="javascript:;" class="active" index='+index+' id='+cityName+'>'+cityName+'</a>');
			}
		});

		$('.add_city_top_list').on('click','a',function(){
			var index = $(this).attr('index');
			$(this).remove();
			$('.add_city_list_content a').eq(index).removeClass('active');

		})


		//选择省市
		$('#add_city').click(function(){
			layer.open({
				type: 1,
				title: '',
				shadeClose: true,
				shade: 0.8,
				area: ['800px', '530px'],
				content: $('#add_city_content')
			}); 
		});

	});

	/*引用layui*/
	layui.use(['form', 'layedit', 'laydate','element','layer'], function(){
      var form = layui.form
      ,layer = layui.layer
      ,layedit = layui.layedit
      ,laydate = layui.laydate
      ,$ = layui.jquery
      ,element = layui.element;
    })

    function find_close(){
		layer.closeAll();
	}
</script>
</html>
